<script lang="ts" setup>
import { IMOU_APPID, IMOU_APPSECRET } from '@/config/app';
import useToast from '@/hooks/useToast';
import EquipRequest from '@/request/equipRequest';
import { useAppStore } from '@/store';
import { navigate } from '@/utils/navigate';
import to from '@/utils/to';

interface IState {
  miniToken: string; // 临时token
  deviceId: string; // 设备序列号
  channelId: number; // 通道id
  channelList: IChannelList[];
  show: boolean;
}
const store = useAppStore();
const { showToast } = useToast();
const state = reactive<IState>({ show: false, miniToken: '', deviceId: '', channelId: 0, channelList: [] });
const playConfig = `{"resolution": "SD", "voice": "on", "fullScreen": "off"}`;

onLoad(async (options) => {
  if (!options) return;
  if (!options.equipMac) {
    showToast('没有设备序列号').then(() => {
      setTimeout(() => {
        navigate({ url: '', type: 'navigateBack' });
      }, 1000);
    });
    return;
  }
  state.deviceId = options.equipMac;
  if (!store.$state.IMOU_TOKEN) {
    await fetchImouToken();
  }
  await fetchListDeviceDetailsByIds();
});

// 请求乐橙云获取token
const fetchImouToken = async () => {
  const [err, res] = await to(EquipRequest.ImouToken({ appId: IMOU_APPID, appSecret: IMOU_APPSECRET, hasLoading: true }));
  if (err) return;
  store.$patch({ IMOU_TOKEN: res.data.accessToken });
};

// 乐橙云 - 通过设备id获取设备
const fetchListDeviceDetailsByIds = async () => {
  const [err, res] = await to(EquipRequest.ListDeviceDetailsByIds({ deviceList: [{ deviceId: state.deviceId }], hasLoading: true }));
  if (err) return;
  if (res.data.deviceList.length > 0) {
    if (res.data.deviceList[0].channelList.length > 0 && res.data.deviceList[0].channelList.length === 1) {
      state.channelId = res.data.deviceList[0].channelList[0].channelId;
      await fetchCreateWeChatMiniProgramToken();
    } else {
      state.show = true;
      state.channelList = res.data.deviceList[0].channelList.map((item) => {
        return { ...item, name: `通道${item.channelId}` };
      });
    }
  }
};

// 创建小程序临时token用于播放监控
const fetchCreateWeChatMiniProgramToken = async () => {
  const { deviceId, channelId } = state;
  const [err, res] = await to(EquipRequest.CreateWeChatMiniProgramToken({ deviceId, channelId, hasLoading: true }));
  if (err) return;
  state.miniToken = res.data.miniToken;
};

// 处理通道选择
const handleChannelConfirm = async (data: IChannelList) => {
  state.channelId = data.channelId;
  state.show = false;
  await fetchCreateWeChatMiniProgramToken();
};
</script>

<template>
  <view class="w-screen h-screen" v-if="state.miniToken">
    <imou-player :miniToken="state.miniToken" :deviceId="state.deviceId" :channelId="state.channelId" liveType="real" functionConfig="talk,PTZ,snapShot" :playConfig="playConfig" height="420"> </imou-player>
  </view>
  <van-empty v-else description="暂无数据" />

  <van-popup position="bottom" round :show="state.show" @close="state.show = false">
    <view class="bg-white w-full">
      <van-picker show-toolbar value-key="name" :columns="state.channelList" title="请选择通道" @cancel="state.show = false" @confirm="handleChannelConfirm($event.detail.value)" />
    </view>
  </van-popup>
</template>
